<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
	<base href="<%=basePath%>">
	<meta charset="UTF-8">
	<title>Title</title>
	<script src='static/js/jquery-2.1.3.min.js'></script>
	<script type="text/javascript" src="static/js/layer.js"></script>
	<script type="text/javascript"  src="static/layui/layui.js"></script>
	<script type="text/javascript" src="static/js/jquery.serializejson.min.js"></script>
	<script type="text/javascript" src="static/js/zTree/js/jquery.ztree.all.min.js"></script>
	<link rel="stylesheet" href="static/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="static/js/zTree/css/zTreeStyle/zTreeStyle.css" media="all">
	<style>
		.layui-colla-title:hover{
			background: #c9e5fc;
		}
	</style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title">
	<legend id="total">任务数量：${toTal}</legend>
	<div class="layui-inline" style="float: right;">
		<label class="layui-form-label" style="background-color: #E8E8E8">选择总数：</label>
		<div class="layui-input-inline">
			<select id="fenpaiPagesize" name="fenpaiPagesize"  style="display: block;height: 38px;width: 190px;
				margin-right: 3px;">
				<option value="50">50</option>
				<option value="100">100</option>
				<option value="200">200</option>
				<option value="500">500</option>
				<option value="1000">1000</option>
			</select>
		</div>
	</div>
	<fieldset class="layui-elem-field" style="margin-top: 45px;">
		<legend style="font-size: 15px;">各组催收人员</legend>
		<div class="layui-collapse" lay-filter="group" lay-accordion>
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">S1</h2>
				<div class="layui-colla-content">
					<ul id="S1" class="ztree" style="display: inline-table"></ul>
				</div>
			</div>
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">S2</h2>
				<div class="layui-colla-content">
					<ul id="S2" class="ztree" style="display: inline-table"></ul>
				</div>
			</div>
			<div class="layui-colla-item">
				<h2 class="layui-colla-title">S2+</h2>
				<div class="layui-colla-content">
					<ul id="S3" class="ztree" style="display: inline-table"></ul>
				</div>
			</div>
		</div>
	</fieldset>
</fieldset>
<div class="layui-layer-btn layui-layer-btn-c" style="position: fixed;bottom: 0;width: 100%;background: #F8F8F8;
	padding-top: 5px;">
	<a id="createContract"  class="layui-layer-btn0">分派</a>
	<a class="layui-layer-btn1" onclick="closeLayer()">关闭</a>
</div>
<input type="hidden" id="treeIdS1"/>
<input type="hidden" id="treeIdS2"/>
<input type="hidden" id="treeIdS3"/>
<script>
	var zTree = $.fn.zTree;
	var baseTotal = '${toTal}';
	$(function(){
		//加载树
		collapse();
		//分派事件
		dispatched();
	});
	
	
	function collapse() {
		layui.use('element', function(){
			var element = layui.element;
			element.on('collapse(group)', function(data){
				var currentTree = $(data.content);
				var type = $(data.title).text().split("")[0];
				if(data.show){
					//初始化树
					getTree(type,currentTree);
				}
				//点击面板时取消其他树的勾选
				cancelCheck(currentTree);
			});
		});
	}
	
	function cancelCheck(currentTree){
		var ids = [];
		ids.push($(currentTree).children().attr("id"));
		$.map($(currentTree).parent().siblings(),function(n){
			ids.push($(n).children().last().children().attr("id"));
		});
		$.each(ids,function (i,n) {
			var treeObj = zTree.getZTreeObj(n);
			if(treeObj){
				treeObj.checkAllNodes(false);
				$("#treeId" + n).val("");
			}
		});
	}
	
	function getTree(type,currentTree) {
		var setting = {
			check: {
				enable: true
			},
			callback: {
				onClick: function (event, treeId, treeNode) {
					console.log(treeNode);
				},
				onCheck:function (event, treeId, treeNode) {
					var treeObj = $.fn.zTree.getZTreeObj(treeId);
					var nodes = treeObj.getNodesByParam("name", type, null);
					nodes[0].checked ? $("#treeId" + treeId).val(treeId) : $("#treeId" + treeId).val("");
				}
			}
		};
		var index;
		$.ajaxSetup({
			beforeSend:function(){
				index = layer.load();
			}
		});
		$.getJSON("taskdetails/avgDispatched/" + type, function(data){
			layer.close(index);
			if(data[0].children == 0){
				$(currentTree).html("<i class='layui-icon' style='color: red;'>&#xe69c;</i>没有相关数据");
				return;
			}
			zTree.init($("#" + (type == "S2+" ? "S3" : type)), setting, data);
		});
	}
	
	function closeLayer(){
		var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
		parent.layer.close(index);
	}
	
	function dispatched() {
		$("#createContract").click(function () {
			var treeId = $.map($("input[id^='treeId']"),function (n) {
				return $(n).val() ? $(n).val() : null;
			});
			if(treeId.length > 1){
				layer.msg('只能勾选一个组别，不可有多个组别');
				return;
			}
			if(treeId.length == 0) {
				layer.msg('请勾选催收员');
				return;
			}
			var treeObj = zTree.getZTreeObj(treeId.join(""));
			var nodes = treeObj.getCheckedNodes(true);
			var ids = $.map(nodes ,function (n) {
				return n.level  == 2 ? n.id : null;
			});
			if(ids.length == 0) {
				layer.msg('请勾选催收员');
				return;
			}
			//组长个数
			var m  = $.grep(nodes,function (n,i) {
				return n.level == 1
			});
			//提交表单
			layer.confirm('确定将任务分配吗? ', {
				btn: ['确定', '取消'],
				shade:0.1,
				//按钮
			}, function () {
				var a = ids;
				//任务总数
				var total = baseTotal;
				//选择的总数
				var size = $("#fenpaiPagesize").val();
				var len = a.length;
				var feitotal= total;
				if((parseInt(total)>parseInt(size))){
					feitotal=size;
				}else {
					feitotal = total;
				}
				if(len>feitotal){
					layer.msg('任务总数不能小于人数');
					return ;
				}
				if (len > 0) {
					layer.confirm("任务总数"+feitotal+",分配人数"+len+",每人分"+parseInt(feitotal/len)+"个案件，还有"+feitotal%len+"个案件不能分", {
						btn: ['确定','取消'], //按钮
						shade:0.1
					}, function(){
						$.post("taskdetails/pilianguser2",
							{
								"userid":null,
								"useridStr":a.join(","),
								"totalTask": total,
								"fenpaiPagesize": size,
								"status":0,
								"flag":null
							},
							function(){
								layer.msg('分配成功', {icon: 1,shade:0.1,time: 1300},function(){
									closeLayer();
								});
							}
						);
					}, function(){
						layer.msg('已取消');
					});
				} else {
					layer.msg('请勾选催收员');
				}
				
			}, function () {
				layer.msg('考虑清楚后再来找我哦');
			});
		});
	}
</script>
</body>
</html>